<template>
	<view class="container">
		<view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }">
						<!-- 不跳转商城主页 -->
				<!-- <image v-if="userInfo.identity != 2" @click="goToProfile" src="/static/base/index/store.png"
					class="menu-icon" mode="aspectFit" /> -->
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">消息</view>
			<view class="header-right">
			</view>
		</view>

		<scroll-view scroll-y class="content">
			<view :style="{height : contentTop + 'px'}"></view>
			<view class="clear-unread" @click="clearUnread">
				<text class="clear-icon">🗑</text>
				<text class="clear-text">清除未读</text>
			</view>

			<view class="message-types">
				<view class="message-type-item" @click="goToComments">
					<image class="type-icon" src="/static/base/message/comment.png"></image>

					<text class="type-title">评论</text>
					<view v-if="commentCount > 0" class="unread-badge">
						<text class="unread-count">{{ commentCount }}</text>
					</view>
				</view>

				<view class="line"></view>

				<view class="message-type-item" @click="goToLikes">
					<image class="type-icon" src="/static/base/message/good.png"></image>
					<text class="type-title">赞</text>
					<view v-if="likeCount > 0" class="unread-badge">
						<text class="unread-count">{{ likeCount }}</text>
					</view>
				</view>
			</view>



			<!-- <view class="chat-list">
				<view v-for="(chat, index) in chatList" :key="index" class="chat-item" @click="goToChat(chat.id)">
					<view class="chat-avatar-container">
						<image :src="chat.avatar" class="chat-avatar" mode="aspectFill" />
						<view v-if="chat.unreadCount > 0" class="chat-unread-badge">
							<text class="chat-unread-count">{{ chat.unreadCount }}</text>
						</view>
					</view>
					<view class="chat-info">
						<view class="chat-header">
							<text class="chat-name">{{ chat.name }}</text>
							<text class="chat-time">{{ chat.lastTime }}</text>
						</view>
						<text class="chat-last-message">{{ chat.lastMessage }}</text>
					</view>
				</view>
			</view> -->
		</scroll-view>

		<TableBar :current="2" :messagecount="messagecount" />
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import {
		getUnreadMessage,
		readMessage
	} from '@/api/base/message.js'
	import {
		mapGetters
	} from 'vuex'

	import {
		USER_INFO,
		UID,
		LOGIN_STATUS
	} from '@/config/cache';
	import Cache from '@/utils/cache';
	import {
		getBaseUserInfo
	} from '@/api/base/user-center'; // 注意：新接口无参数
	export default {
		components: {
			TableBar
		},
		data() {
			return {
				messagecount: 0,
				userInfo: {},
				currentIndex: 2,
				safeTop: 0,
				contentTop: 0,
				commentCount: 0,
				likeCount: 0,
				chatList: [{
						id: 1,
						name: '前端数据，无接口',
						avatar: 'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/1.png  ',
						lastMessage: '关注我，看点不一样的，好好地关注...',
						lastTime: '09-12',
						unreadCount: 3
					},
					{
						id: 2,
						name: '前端数据，无接口',
						avatar: 'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/2.png  ',
						lastMessage: '关注我，看点不一样的，好好地关注...',
						lastTime: '09-12',
						unreadCount: 1
					}
				]
			}
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		onLoad() {
			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop + 2;
			this.contentTop = barTop + 50;
			//初始化数据,不用拿路由 参数
			// this.initMessage();
		},
		onShow() {
			//初始化数据
			if (this.isLogin) {
				this.initMessage();
				this.getUserInfo();
			}
		},
		methods: {
			getUserInfo() {
				// 新接口无需传参
				getBaseUserInfo().then(res => {
					const cacheUserInfo = JSON.parse(Cache.get(USER_INFO));
					if (res.status === 200 && res.data) {
						// 将后端返回字段赋值给 userInfo
						this.userInfo = {
							...this.userInfo,
							...res.data,
							// 可选：显式转换数值字段（虽后端返回数字，但保险起见）
							phoneNumber: res.data.phone,
							follow_count: res.data.follow_count || 0,
							fans_count: res.data.fans_count || 0,
							comment_count: res.data.comment_count || 0,
							work_like_count: res.data.work_like_count || 0,
							share_count: res.data.share_count || 0,
							income: res.data.income || '0.00'
						};
					}
				}).catch(err => {
					console.log('获取用户信息失败', err);
					// 可选：失败时重置或提示
				});
			},
			initMessage() {
				getUnreadMessage().then(res => {
					if (res.status === 200) {
						this.likeCount = res.data.like;
						this.commentCount = res.data.comment;
						this.messagecount = this.likeCount + this.commentCount
					} else(err => {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						})
						console.log('获取数据失败', err);
					})
				}).catch(err => {
					console.log('获取数据失败', err);
				})
			},
			goToProfile() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			goToComments() {
				uni.navigateTo({
					url: '/pages/sub_base/comment-list/index'
				})
			},
			goToLikes() {
				uni.navigateTo({
					url: '/pages/sub_base/like-list/index'
				})
			},
			goToChat(id) {
				uni.navigateTo({
					url: `/pages/sub_base/chat/index?id=${id}`
				})
			},
			clearUnread() {

				readMessage(1, 1).then(res => {
					if (res.status === 200) {

						uni.showToast({
							title: '未读消息已清除',
							icon: 'success'
						})

						this.chatList.forEach(chat => {
							chat.unreadCount = 0
						})
						this.commentCount = 0
						this.likeCount = 0
						this.messagecount = 0

					} else {
						console.log('标记消息已读失败', res.msg)
						uni.showToast({
							title: res.msg || '清除失败',
							icon: 'error'
						})
					}
				}).catch(err => {
					console.log('标记消息已读失败', err)
					uni.showToast({
						title: err || '清除失败',
						icon: 'error'
					})
				})


			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #eaf2f9;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27.76rpx;
		z-index: 100;
		box-shadow: 0 1.735rpx 6.94rpx rgba(0, 0, 0, 0.05);
	}

	.menu-icon {
		width: 45rpx;
		height: 45rpx;
	}

	.hamburger {
		width: 41.64rpx;
		height: 31.23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.line {
		margin: auto 20rpx;
		height: 1px;
		background-color: #D6D6D6;
	}

	.header-title {
		font-size: 31.23rpx;
		font-weight: 600;
		color: #333333;
	}

	.header-left {
		width: 76.34rpx;
		height: 76.34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-right {
		width: 104.1rpx;
	}

	.icon-button {
		width: 41.64rpx;
		height: 41.64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 17.35rpx;
	}

	.icon {
		font-size: 31.23rpx;
		color: #333;
	}

	.content {
		height: calc(100vh - 34.7rpx);
	}

	.message-types {
		margin: 0 27.76rpx;
		border-radius: 20.82rpx;
		overflow: hidden;
	}

	.message-type-item {
		display: flex;
		align-items: center;
		padding: 36rpx 20rpx;
		/* position: relative; */
	}

	.message-type-item:not(:last-child)::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 4%;
		width: 100%;
		height: 2rpx;
		background-color: #000;
		transform: scaleY(0.2);
		/* 垂直方向压缩一半，视觉上就是 0.5px */
		transform-origin: bottom;
		/* 从底部缩放，避免位置偏移 */
	}


	.type-icon {
		width: 83.28rpx;
		height: 83.28rpx;
		border-radius: 41.64rpx;
		margin-right: 27.76rpx;
	}

	.icon-text {
		font-size: 34.7rpx;
		color: #ffffff;
	}

	.type-title {
		font-size: 36rpx;
		color: #333333;
	}

	.unread-badge {
		position: absolute;
		right: 27.76rpx;
		min-width: 31.23rpx;
		height: 31.23rpx;
		background-color: #ff7043;
		border-radius: 15.615rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6.94rpx;
	}

	.unread-count {
		font-size: 20.82rpx;
		color: #ffffff;
		font-weight: 600;
	}

	.clear-unread {
		align-items: center;
		padding: 8.675rpx 27.76rpx;
		color: #666666;
		font-size: 24.29rpx;
		text-align: right;
	}

	.clear-icon {
		margin-right: 6.94rpx;
		font-size: 27.76rpx;
	}

	.chat-list {
		margin: 0 27.76rpx;
		overflow: hidden;
	}

	.chat-item {
		display: flex;
		align-items: center;
		padding: 27.76rpx;
		position: relative;
	}

	.chat-item::before {
		content: '';
		justify-self: anchor-center;
		position: absolute;
		top: 0;
		left: 17.35rpx;
		width: 95%;
		height: 1.735rpx;
		background-color: #d5d5d5;
	}


	.chat-avatar-container {
		position: relative;
		margin-right: 27.76rpx;
	}

	.chat-avatar {
		width: 83.28rpx;
		height: 83.28rpx;
		border-radius: 41.64rpx;
	}

	.chat-unread-badge {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 31.23rpx;
		height: 31.23rpx;
		background-color: #ff7043;
		border-radius: 15.615rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6.94rpx;
	}

	.chat-unread-count {
		font-size: 20.82rpx;
		color: #ffffff;
		font-weight: 600;
	}

	.chat-info {
		flex: 1;
	}

	.chat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6.94rpx;
	}

	.chat-name {
		font-size: 27.76rpx;
		font-weight: 600;
		color: #333333;
	}

	.chat-time {
		font-size: 24.29rpx;
		color: #999999;
	}

	.chat-last-message {
		font-size: 24.29rpx;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>